<template>
  <div style="height:100vh;overflow:hidden;">
    <!-- 双视频层叠 -->
    <video v-if="currentVideo" autoplay muted class="background-video" :src="currentVideo" @ended="switchVideo"></video>
    <video v-if="nextVideo" autoplay muted class="background-video" :src="nextVideo" style="opacity: 0;"></video>

    <!-- 原有内容 -->
    <el-container style="padding: 30px; height: 100%">
      <!--      <el-header>-->
      <!--        <el-row>-->
      <!--          <el-col :span="24" style="text-align: center">-->
      <!--            <span style="color:#fff;font-weight: bold;font-size: 30px;">宠物脚印管理系统</span>-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </el-header>-->
      <el-main>
        <el-row type="flex" justify="center" align="middle" style="height: 100%;">
          <el-col :span="8">
            <el-card
                style="background-color: rgba(255, 255, 255, 0.5); border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s, box-shadow 0.3s;"
            >
              <h1 style="text-align: center; font-weight: bold; color: #000; font-family: 'Comic Neue', cursive;">
                PetPaw社区管理系统
              </h1>
              <el-form label-position="top">
                <el-form-item label="管理员名" style="font-weight: bold;">
                  <el-input placeholder="请输入管理员名"
                            v-model="admin.adminname"
                            ref="adminnameInput"
                            @keydown.enter="focusPasswordInput"
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码" style="font-weight: bold;">
                  <el-input placeholder="请输入密码"
                            show-password
                            v-model="admin.password"
                            ref="passwordInput"
                            @keydown.enter="login"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                      type="primary"
                      style="width: 100%;font-weight: bold;border-radius: 20px;
                      background-image: linear-gradient(to right, #fffacd, #add8e6);
                      border: none;color: #000; /* 设置文字颜色为黑色，确保可见 */"
                      @click="login"
                  >
                    <i class="el-icon-paw" style="margin-right: 8px;"></i>
                    登录
                  </el-button>
                </el-form-item>
              </el-form>
              <div style="font-size: 14px; color: #fff; text-align: center; padding: 10px 0">
                (体验账号:tom 密码:123456)
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

//1.定义管理员对象用来收集登录表单中的数据
const admin = ref({adminname: "", password: ""});
//2.定义登录方法
const login = () => {
  // 如果密码为空，提示用户输入密码
  if (!admin.value.password) {
    ElMessage.warning("请输入密码");
    return; // 直接返回，不执行后续逻辑
  }

  console.log(admin.value);
  // 向后端服务器发送登录请求
  axios
      .post(BASE_URL + "/p1/admin/login", admin.value)
      .then((response) => {
        // 回调函数:服务器响应后执行的代码
        console.log(response.data); // 后端返回的JsonResult
        if (response.data.code == 2000) {
          ElMessage.success("登录成功!");
          router.push('/admin');
          // 登录成功后将后端返回的adminVO存储在localStorage中
          console.log(response.data.data); // 是JsonResult的data值,此处是adminVO
          console.log(JSON.stringify(response.data.data));
          localStorage.setItem('admin', JSON.stringify(response.data.data));
        } else {
          ElMessage.error(response.data.msg);
          // 仅清空密码，保留用户名
          admin.value.password = "";
        }
      });
};

//视频列表
const videos = [
  "/imgs/admin-login.3.mp4",
  "/imgs/admin-login.1.mp4",
];
// 当前播放的视频索引
const currentVideoIndex = ref(0);
// 当前播放的视频地址
const currentVideo = ref(videos[currentVideoIndex.value]);
// 下一个视频地址
const nextVideo = ref(videos[(currentVideoIndex.value + 1) % videos.length]);

// 切换视频方法
const switchVideo = () => {
  // 更新当前视频和下一个视频
  currentVideoIndex.value = (currentVideoIndex.value + 1) % videos.length;
  currentVideo.value = videos[currentVideoIndex.value];
  nextVideo.value = videos[(currentVideoIndex.value + 1) % videos.length];

  // 获取下一个视频元素
  const nextVideoElement = document.querySelector(".background-video[style*='opacity: 0']");

  // 监听 loadeddata 事件，确保视频加载完成后再播放
  nextVideoElement.addEventListener(
      "loadeddata",
      () => {
        nextVideoElement.play();
      },
      {once: true} // 只监听一次
  );

  // 加载新视频
  nextVideoElement.load();
};

// 组件挂载时开始播放第一个视频
onMounted(() => {
  const videoElement = document.querySelector(".background-video");

  // 监听 loadeddata 事件，确保视频加载完成后再播放
  videoElement.addEventListener(
      "loadeddata",
      () => {
        videoElement.play();
      },
      {once: true} // 只监听一次
  );

  videoElement.load(); // 加载视频
});

//获取输入框引用
const adminnameInput = ref(null)
const passwordInput = ref(null)
//输入管理员名时回车焦点到密码输入框
const focusPasswordInput = () => {
  passwordInput.value.focus();
}
</script>

<style scoped>
/* 背景视频样式 */
.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1; /* 将视频放在最底层 */
  transition: opacity 1s ease-in-out; /* 添加淡入淡出效果 */
}

/* 确保内容在视频上方 */
.el-container {
  position: relative;
  z-index: 1;
}

.el-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
</style>